@extends('layouts.header')
@section('title','预览')
@section('content')
    <article class="page-container text-c">
        <div class="row cl mt-10">
            <div id="iframe">
                <iframe src="http://{{$info->server_lan_ip}}/led/ok.html?url=rtsp://{{$info->username}}:{{$info->password}}-{{$info->lan_ip}}:554/h264/ch0/main/av_stream" frameborder="0" width="90%" height="650px"></iframe>
            </div>
            <div id="btn-chanels">
                @for($i=0;$i<$info->channel_count+1;$i++)
                    <a id="chanel-{{$i}}" class="btn  radius btn-primary" onclick="channel({{$i}})">通道{{$i}}</a>
                @endfor
            </div>
        </div>
    </article>
    <script>
    $(function(){
        channel(0);
    })
        /* 获取播放器元素 */
        // var player = document.getElementById('ysOpenDevice').contentWindow;
        // /* iframe 支持方法 */
        // player.postMessage("play", "https://open.ys7.com/ezopen/h5/iframe") /* 播放 */
        // player.postMessage("stop", "https://open.ys7.com/ezopen/h5/iframe") /* 结束 */
        // player.postMessage("capturePicture", "https://open.ys7.com/ezopen/h5/iframe") /* 截图 */
        // player.postMessage("openSound", "https://open.ys7.com/ezopen/h5/iframe") /* 开启声音 */
        // player.postMessage("closeSound", "https://open.ys7.com/ezopen/h5/iframe") /* 关闭声音 */
        // player.postMessage("startSave", "https://open.ys7.com/ezopen/h5/iframe") /* 开始录制 */
        // player.postMessage("stopSave", "https://open.ys7.com/ezopen/h5/iframe") /* 结束录制 */
        function channel(num) {
            $('#btn-chanels').children('a').removeClass('btn-primary');
            $('#chanel-'+num).addClass('btn-primary');
            let str = '<iframe src="http://{{$info->server_lan_ip}}/led/ok.html?url=rtsp://{{$info->username}}:{{$info->password}}-{{$info->lan_ip}}:554/Streaming/Channels/'+num+'01?transportmode=unicast" frameborder="0" width="90%" height="650px"></iframe>';
                $('#iframe').html(str);
         
        }
    </script>
@endsection